<template>
  {{ date1 }}
  <f-date
    showTime
    valueFormat="YYYY-MM-DD HH:mm:ss"
    format="YYYY-MM-DD HH:mm:ss"
    :min="-30"
    :max="0"
    v-model:value="date1" />
  <f-date type="year" :min="0" :max="30" v-model:value="date2" />
  <f-date :min="min" v-model:value="date3" />
  <f-input-number v-model:value="min"></f-input-number>
  <f-date-picker v-model:value="date4" :min="min" />
  <div>
    {{ date1 }}
    {{ date2 }}
    {{ date3 }}
    {{ date4 }}
  </div>

  <h1>date range</h1>
  <div class="content1">
    <f-date-range
      showTime
      valueFormat="YYYY-MM-DD HH:mm:ss"
      format="YYYY-MM-DD HH:mm:ss"
      v-model:value="newValue"
      :disabled-date="disabledDate"
      isDefault></f-date-range>
    {{ newValue }}
    <f-date-range type="select" v-model:value="newValue2" />
    {{ newValue2 }}
  </div>

  <div>
    <f-range-picker v-model:value="newValue3" />
    {{ newValue3 }}
    <f-range-picker type="select" v-model:value="newValue4" />
    {{ newValue4 }}
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { dayjs } from 'fok-js';

const date1 = ref('');
const date2 = ref('');
const date3 = ref('');
const date4 = ref('');
const min = ref(0);

const newValue = ref();
const newValue2 = ref();
const newValue3 = ref();
const newValue4 = ref();

const disabledDate = (current: any) => {
  return current && current < dayjs().endOf('day');
};
</script>
